<template>
  <div class="selectItem-wrapper">
    <div v-for="item in itemData" class="item">

        <img class="thumb" :src="item.thumb" width="160" height="100">

      <router-link  :to="{path: '/movie/detail/'+item._id}">
        <div class="item_mask"></div>
      </router-link>
      <div class="title">{{item.title}}</div>
      <div class="info">
        <div class="see">
          <span class="icon ion-eye"></span>
          <span>{{item.see}}</span>
        </div>
        <div class="commit">
          <span class="icon ion-chatbubble-working"></span>
          <span>886</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      itemData: {
        type: Array,
        default() {
          return [];
        }
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">
  .selectItem-wrapper{
    padding-top: 20px;
    width: 100%;
    height: 320px;
    .item{
      position: relative;
      display: inline-block;
      overflow: hidden;
      margin-right: 20px;
      margin-bottom: 20px;
      width: 160px;
      height: 150px;
      .item_mask{
        position: absolute;
        border-radius: 5px;
        top: 0;
        left: 0;
        width: 160px;
        height: 100px;
        background: rgba(7,17,27,0.0);
        transition: all 0.4s;
      }
      &:hover .item_mask{
        background: rgba(7,17,27,0.5);
      }
      .thumb{
        border-radius: 5px;
      }
      .title{
        padding: 0 5px 0 5px;
        padding-top: 12px;
        word-wrap: break-word;
        word-break: break-all;
        line-height: 20px;
        font-size: 12px;
        color: #222;
      }
      .info{
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background: #fff;
        width: 100%;
        font-size: 0;
        transition: all 0.5s;
        .icon{
          margin-right: 5px;
          font-size: 12px;
        }
        .see,.commit{
          font-size: 12px;
          color: #99a2aa;
        }
      }
      &:hover .info{
        bottom: -30px;
      }
      &:nth-of-type(5){
        margin-right: 0;
      }
      &:nth-of-type(6){
        margin-bottom: 0;
      }
      &:nth-of-type(7){
        margin-bottom: 0;
      }
      &:nth-of-type(8){
        margin-bottom: 0;
      }
      &:nth-of-type(9){
        margin-bottom: 0;
      }
      &:nth-of-type(10){
        margin-bottom: 0;
        margin-right: 0;
      }
    }
  }
</style>
